/*
 * @Description: 用户组页面
 * @Author: 谢涛
 * @LastEditors: Please set LastEditors
 * @Date: 2019-04-22 19:13:58
 * @LastEditTime: 2020-02-24 15:53:52
 */

import React, { Component } from 'react'
import { DeleteOutlined, FileAddOutlined, FormOutlined, SearchOutlined } from '@ant-design/icons';
import '@ant-design/compatible/assets/index.css';
import { Form, Col, Row, Input, Button, Popconfirm, message, } from 'antd';
import MyTable from '../../components/MyTable'
import BtnPermission from '../../components/BtnPermission'
import { userGroupApi } from '@/services/basic'
import EditItem from './EditItem'
import '../../layouts/queryList.css'

const InputGroup = Input.Group;

class UsersGroup extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: [],//data就是最顶层的数据 它包含records records是每条列表数据的集合 data还包含了其他信息 譬如总页数 当前页等等
            records: [],
            handlers: {
                create: 'create',
                view: 'view',
                update: 'update',
            },//定义操作类型   
        }
    }

    //组件挂载后为列表请求数据
    componentDidMount = () => {
        this.queryData();
    }

    //页码变化的时候，请求数据
    onChange = (pagination) => {
        this.queryData(pagination);
    }

    //增、改一条数据后刷新列表
    editItemDone = () => {
        this.queryData();
    }

    //增查改、设置操作类型，并传入对应行数据
    setHandler = (handler, record) => {
        this.EditItemRef.showModal(handler, record);
    }

    //删除一条数据后刷新列表
    deleteItem = (id) => {
        userGroupApi.delete(id).then(res => {
                if (res.code === '1') {
                    message.success(res.msg)
                    this.queryData()
                }
                message.warning(res.msg)
            })
    }

    //查找框查找数据
    queryData = (pagination = undefined) => {
        let formData = this.form.getFieldsValue();
        userGroupApi.getPage({ formData, pagination })
            .then(res => { this.setState({ data: res, records: res.records }) })
    }

    render() {
        const { create, update } = this.state.handlers



        const columns = [
            { title: '用户组名称', dataIndex: 'yhzmc' },
            { title: '备注', dataIndex: 'bz' },
            {
                title: '操作',
                key: 'action',
                // width: 360,
                render: (text, record) => (
                    <span className='handleButton'>
                        {
                            this.props.permission.edit ?
                                <FormOutlined onClick={() => this.setHandler(update, record)} className='update-button' />
                            : ''
                        }
                        {
                            this.props.permission.delete ?
                                <Popconfirm title="确认删除?" onConfirm={() => this.deleteItem(record.id)}>
                                    <DeleteOutlined className='delete-button' />
                                </Popconfirm>
                            : ''
                        }
                    </span>
                ),
            },
        ];

        const { data, records } = this.state

        return (
            <div className="queryList">
                <Form autoComplete="off"  ref={form => this.form = form} layout="inline" >
                    <InputGroup className='input-group'>
                        <Row gutter={24}>
                            <Col span={9}>
                                <Form.Item label='用户组名称'
                                    name="yhzmc"
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                    <Input placeholder='请输入' allowClear />
                                </Form.Item>
                            </Col>
                            <Col span={9}>
                                <Form.Item label='备注'
                                    name="bz"
                                    getValueFromEvent={event => event.target.value.replace(/\s+/g, "")}
                                >
                                    <Input placeholder='请输入' allowClear />
                                </Form.Item>
                            </Col>
                            <Col span={2}>
                                <Button onClick={this.queryData} icon={<SearchOutlined />} className='search-button'>查询</Button>
                            </Col>
                            {
                                this.props.permission.add ?
                                    <Col span={2}>
                                        <Button icon={<FileAddOutlined />} className='addButton' onClick={() => this.setHandler(create)}>新增</Button>
                                    </Col>
                                : ''
                            }
                        </Row>
                    </InputGroup>
                </Form>
                <EditItem ref={(EditItemRef) => this.EditItemRef = EditItemRef} editItemDone={this.editItemDone} />
                <MyTable props={{ columns, dataSource: records, data, setHandler: this.setHandler, onChange: this.onChange, permission: this.props.permission  }} />

            </div>
        );
    }
}
export default BtnPermission(UsersGroup)